<template>
	<view>
		<cu-custom :bgLinerBorder="true" :isBlack="false">
			<block slot="content">添加发票抬头</block>
		</cu-custom>
		<view class="contents">
			<view class="flex justify-space-between align-center items">
				<view class="p-r-10 f-16 fontBold">
					发票类型
				</view>
				<view class="flex flex-wrap">
					<view class="m-r-5 m-l-5 btns m-t-2 m-b-2" :class="[item.id==postData.type?'act':'']" v-for="(item,index) in typeList" :key="index" @click="changeType(item,'type')">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="flex justify-space-between align-center items">
				<view class="p-r-10 f-16 fontBold">
					发票内容
				</view>
				<view class="flex flex-wrap">
					<view class="m-r-5 m-l-5 btns m-t-2 m-b-2" :class="[item.id==postData.invType?'act':'']" v-for="(item,index) in invTypeList" :key="index" @click="changeType(item,'invType')">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="flex justify-space-between align-center items">
				<view class="p-r-10 f-16 fontBold">
					抬头类型
				</view>
				<view class="flex flex-wrap">
					<view class="m-r-5 m-l-5 btns m-t-2 m-b-2" :class="[item.id==postData.headType?'act':'']" v-for="(item,index) in headTypeList" :key="index" @click="changeType(item,'headType')">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="flex justify-space-between align-center items items-border">
				<view class="p-r-10 f-16 fontBold">
					抬头名称
				</view>
				<view class="flex-1 text-right p-r-8">
					<input type="text" placeholder="请输入" class="f-14 orange" v-model="postData.headTitle"/>
				</view>
			</view>
			<view class="flex justify-space-between align-center items items-border" v-show="postData.headType==2">
				<view class="p-r-10 f-16 fontBold">
					单位税号
				</view>
				<view class="flex-1 text-right p-r-8">
					<input type="text" placeholder="请输入" class="f-14 orange" v-model="postData.invNum"/>
				</view>
			</view>
			<view class="flex justify-space-between align-center items items-border">
				<view class="p-r-10 f-16 fontBold">
					收票邮箱
				</view>
				<view class="flex-1 text-right p-r-8">
					<input type="text" placeholder="请输入" class="f-14 orange" v-model="postData.email"/>
				</view>
			</view>
			<view v-show="postData.headType==2">
				<view class="flex justify-space-between align-center items items-border">
					<view class="p-r-10 f-16 fontBold">
						注册地址
					</view>
					<view class="flex-1 text-right p-r-8">
						<input type="text" placeholder="请输入" class="f-14 orange" v-model="postData.address"/>
					</view>
				</view>
				<view class="flex justify-space-between align-center items items-border">
					<view class="p-r-10 f-16 fontBold">
						注册电话
					</view>
					<view class="flex-1 text-right p-r-8">
						<input type="number" placeholder="请输入" class="f-14 orange" v-model="postData.phone"/>
					</view>
				</view>
				<view class="flex justify-space-between align-center items items-border">
					<view class="p-r-10 f-16 fontBold">
						开户银行
					</view>
					<view class="flex-1 text-right p-r-8">
						<input type="text" placeholder="请输入" class="f-14 orange" v-model="postData.bankName"/>
					</view>
				</view>
				<view class="flex justify-space-between align-center items items-border">
					<view class="p-r-10 f-16 fontBold">
						银行账号
					</view>
					<view class="flex-1 text-right p-r-8">
						<input type="text" placeholder="请输入" class="f-14 orange" v-model="postData.bankNum"/>
					</view>
				</view>
			</view>
			<view class="flex justify-space-between align-center m-t-15">
				<view class="f-16 fontBold orange">
					设为默认发票
				</view>
				<view class="flex align-center p-l-20" @click="changeSel">
					<image :src="postData.sel==1?'/static/img/seled.png':'/static/img/sel.png'" class="sel" mode=""></image>
				</view>
			</view>
		</view>
		<view style="height: 130rpx;"></view>
		<view class="bottom-wrap flex justify-space-around">
			<view class="bottom-btn bottom-btn2" @click="sub()">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				postData:{
					type:1,
					invType:1,
					headType:1,
					headTitle:'',
					email:'',
					invNum:'',
					address:'',
					phone:'',
					bankName:'',
					bankNum:'',
					sel:0
				},
				typeList:[{id:1,name:'普通发票'},{id:2,name:'专用发票'}],
				invTypeList:[{id:1,name:'商品明细'},{id:2,name:'商品类别'}],
				headTypeList:[{id:1,name:'个人'},{id:2,name:'单位'}],
				id:0,
			}
		},
		onLoad(option) {
			if(option.id){
				this.id = option.id;
				this.getInfo();
			}
		},
		methods: {
			changeType(item,type){
				this.postData[type] = item.id;
			},
			changeSel(){
				this.postData.sel = this.postData.sel==1?0:1;
			},
			getInfo(){
				let data = {
					invoice_id:this.id
				}
				this.$http('/apicloud/User/usersInvoiceInfo',data).then(res=>{
					if(res.code == 200){
						let datas = res.data;
						this.postData.sel = datas.is_default;
						this.postData.type = datas.type;
						this.postData.invType = datas.type_content;
						this.postData.headType = datas.type_look_up;
						this.postData.headTitle = datas.look_up_name;
						this.postData.email = datas.email;
						if(this.postData.headType == 2){
							this.postData.invNum = datas.unit_num;
							this.postData.address = datas.address;
							this.postData.phone = datas.phone;
							this.postData.bankName = datas.bank_of_deposit;
							this.postData.bankNum = datas.bank_account;
						}
					}
				})
			},
			sub(){
				let data = {
					type:this.postData.type,
					type_content:this.postData.invType,
					type_look_up:this.postData.headType,
					look_up_name:this.postData.headTitle,
					is_default:this.postData.sel,
					email:this.postData.email
				}
				if(this.postData.headType == 2){
					data = {
						...data,
						unit_num: this.postData.invNum,
						address: this.postData.address,
						phone: this.postData.phone,
						bank_of_deposit: this.postData.bankName,
						bank_account: this.postData.bankNum,
					}
				}
				if(this.id){
					data.id = this.id;
				}
				this.$http('/apicloud/User/saveUsersInvoice',data).then(res=>{
					if(res.code == 200){
						this.$util.showToast(res.mess);
						setTimeout(()=>{
							uni.navigateBack();
						},1000)
					}else{
						this.$util.showToast(res.mess);
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.items{
		padding:8rpx 0;
	}
	.items-border{
		border-bottom: 1px solid #B1B1B1;
		padding:15rpx 0;
	}
	.sel{
		width: 44rpx;
		height: 44rpx;
	}
	.btns{
		min-width: 160rpx;
		background: #F0F0F0;
		border-radius: 8rpx;
		padding: 4rpx 4rpx;
		color: #484848;
		text-align: center;
		font-weight: bold;
	}
	.act{
		background: #FFE7DC;
		color: #FF5200;
	}
	
	.bottom-wrap {
		box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.07);
		border-radius: 20px 20px 0 0;
		height: 130rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
		background: #ffffff;
		width: 100%;
		padding: 15rpx 30rpx 0 30rpx;
	
		.bottom-btn {
			width: 100%;
			height: 76rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ffffff;
			font-weight: bold;
			border-radius: 60rpx;
		}
	
	
		.bottom-btn2 {
			background: #FF5200;
		}
	}
</style>
